<template>
    <uni-popup ref="popup" type="center" :mask-click="false" background-color="transparent">
        <view class="statement_dialog">
            <view class="title" style="font-weight:600;">敬告用户</view>

            <view class="row" style="margin-top: 20rpx">
                <text class="text1"
                    >用户使用本APP客户端所提供的信息，在做出决策之前，应先咨询医生意见。若对信息内容理解有误，而对自身情况判断错误，由用户自行承担后果。</text
                >
            </view>

            <view class="row" style="margin-top: 20rpx">
                <text style="font-size:26rpx;color:#333;">本软件所用的专有名词、数据及观点来源于文献:</text>
            </view>

            <view class="row" style="margin-top: 20rpx">
                <view class="desp">
                    <text class="text1">
                        [1]《身体状况：人体测量的使用和解释》，世界卫生组织，(1995)，WHO技术报告系列854。
                    </text>
                </view>

                <view
                    class="link"
                    @tap="
                        openLink(
                            'https://www.who.int/publications/i/item/9241208546'
                        )
                    "
                >
                    <text class="text2">
                        https://www.who.int/publications/i/item/9241208546
                    </text>
                </view>
            </view>
            <view class="row">
                <view class="desp">
                    <text class="text1">[2]《中国肥胖预防和控制蓝皮书》</text>
                </view>
                <view
                    class="link"
                    @tap="
                        openLink(
                            'https://www.cnsoc.org/bookpublica/751910201.html'
                        )
                    "
                    >
                    <text class="text2">https://www.cnsoc.org/bookpublica/751910201.html</text>
                </view
                >
            </view>
            <view class="row">
                <view class="desp"
                    >
                    <text class="text1">[3]《中国居民膳食指南（2022）》</text>
                </view>
                <view
                    class="link"
                    @tap="
                        openLink(
                            'https://www.cnsoc.org/bookpublica/0522202019.html'
                        )
                    "
                    >
                    <text class="text2">https://www.cnsoc.org/bookpublica/0522202019.html</text>    
                </view
                >
            </view>

            <view class="row">
                <view class="desp"
                    >
                    <text class="text1">
                        [4]《中国营养科学全书(2019年)》
                    </text>
                </view>
                <view
                    class="link"
                    @tap="
                        openLink(
                            'https://www.cnsoc.org/bookpublica/111901200.html'
                        )
                    "
                    >
                    <text class="text2">
                        https://www.cnsoc.org/bookpublica/111901200.html
                    </text>
                </view>
            </view>

            <view class="btn_box">
                <view class="desp1">
                    <text class="text">关闭该页面后</text>
                </view>
                <view class="desp1">
                    <text class="text">仍可在我的-设置-声明文献 中查看上述类容</text>
                </view>

                <view class="btn" @tap="close">
                    <text class="text">我已知晓</text>
                </view>
            </view>
        </view>
    </uni-popup>
</template>

<script setup lang="ts">
import { ref, computed, onMounted,onUnmounted } from "vue";
import { ver } from "@/store/ver";
const VER = ver();

const props = defineProps({
    
});

const openLink = (link: string) => {
    uni.navigateTo({
        url: `/pages/webview/webview?url=${encodeURI(link)}`,
    });
};

const close = ()=>{

    const pages = getCurrentPages();
    const currenturl = pages[pages.length - 1].route;


    uni.setStorageSync(`statementreaded-${currenturl}`,2)
    // uni.$emit('statementclose')
    popup.value.close();
}

const statementclose = ()=>{
    popup.value.close();
}

const popup = ref(null);

const open = () => {
    popup.value.open();
}

onMounted(() => {
    // uni.$on('statementclose',statementclose)
    if(VER.ver){
        const pages = getCurrentPages();
        const currenturl = pages[pages.length - 1].route;
        const readed = uni.getStorageSync(`statementreaded-${currenturl}`)
        if(readed!==2){
            popup.value.open();
        }
    }
});
onUnmounted(() => {
    uni.$off('statementclose',statementclose)
});


defineExpose({
  open,
})

</script>
<style lang="scss" scoped>
.statement_dialog {
    width: 650rpx;
    border-radius: 20rpx;
    background: #fff;
    padding: 40rpx 0;
    //   background: linear-gradient(
    //             27deg,
    //             #d6f6fc 0%,
    //             #eafce1 59%,
    //             #b2facd 100%
    //         );
    .title {
        display: flex;
        flex-direction: row;
        justify-content: center;
        font-size: 30rpx;
        padding: 0 20rpx;
        font-weight: 600;
        color: #333;
    }

    .row {
        width: 650rpx;
        display: block;
        text-align: left;
        padding: 0 20rpx;
        .text1{
            width:610rpx;
            color: #666;
            font-size: 26rpx;
            white-space: wrap;
            word-wrap:anywhere;


        }
        .text2{
            width:610rpx;
            color: #566c94;
            font-size: 26rpx;
            white-space: wrap;
            word-wrap:anywhere;

        }
        .desp {
            width: 610rpx;
            flex-direction: row;
            justify-content: flex-start;
            flex-wrap: wrap;
            color: #666;
        }
        .link {
            width: 610rpx;
            flex-direction: row;
            justify-content: flex-start;
            flex-wrap: wrap;
            color: #566c94;
        }
    }

    .btn_box {
        width: 650rpx;
        padding: 0 20rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: left;
        margin-top: 150rpx;
        .desp1 {
            width: 610rpx;
            display: flex;
            flex-direction: row;
            justify-content: center;
            .text {
                color: #1DC691;
                font-size: 22rpx;
            }
        }
        .btn {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            width: 200rpx;
            height: 60rpx;
            background: linear-gradient(to right, #29dba3, #64f1c5);
            border-radius: 10rpx;
            margin-top:10rpx;
            &:active{
                opacity: .7;
            }

            .text {
                color: #fff;
                font-size:28rpx;
            }
        }
    }
}
</style>

